<template>
  <a-modal
    :visible="visible"
    title=""
    centered
    @cancel="onClose"
    :width="600"
    :footer="null"
  >
    <div
      style="
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
      "
    >
      搜索提示词
    </div>
    <a-input
      v-model:value="keywords"
      placeholder="请输入提示词"
      size="large"
      allowClear
      ref="keywordsInputRef"
      @change="onKeywordsChange"
    />
    <div
      class="list-wrap hide-scroller-bar"
      @scroll="onListScroll"
      ref="listWrapRef"
    >
      <template v-if="noData">
        <div class="empty-wrap">
          <a-empty description="未找到相关提示词" />
        </div>
      </template>
      <template v-else>
        <div
          class="list-item"
          v-for="(item, index) of list"
          :key="index"
          @click="onItemClick(item)"
        >
          <div class="list-item-title">{{ item.title }}</div>
          <div class="list-item-content">{{ item.description }}</div>
        </div>
        <div class="tips">
          <span v-if="listLoading">
            <LoadingOutlined />
            加载中
          </span>
          <span v-if="hasMore">上拉加载更多</span>
          <span v-if="noMore">没有更多了</span>
        </div>
      </template>
    </div>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
let inputTimer = null;
export default defineComponent({
  name: "PromptsSearch",
  components: { LoadingOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      page: 1,
      pageSize: 20,
      total: 0,
      noData: false,

      keywords: "",
      list: [],
      hasMore: false,
      noMore: false,
      listLoading: false,
    });

    const getList = (loadMore) => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
      };
      if (state.keywords) {
        params.keywords = state.keywords;
      }
      state.hasMore = false;
      state.noMore = false;
      state.listLoading = true;
      request
        .get("/work_ai", "/user/promptWords/list", { ...params })
        .then((res) => {
          state.listLoading = false;
          state.total = res.total;
          if (res.list && res.list.length > 0) {
            state.noData = false;
            if (loadMore) {
              state.list = state.list.concat(res.list);
            } else {
              state.list = res.list;
            }

            if (state.page * state.pageSize < state.total) {
              state.hasMore = true;
            } else {
              state.noMore = true;
            }
          } else {
            state.noData = true;
          }
        });
    };

    const onKeywordsChange = (e) => {
      if (inputTimer) {
        clearTimeout(inputTimer);
        inputTimer = null;
      }
      inputTimer = setTimeout(() => {
        state.page = 1;
        getList();
      }, 500);
    };

    const onItemClick = (item) => {
      context.emit("onSearchSelect", item);
    };

    const listWrapRef = ref();
    // 监听列表滚动,到底部请求下一页数据
    const onListScroll = (e) => {
      if (e.target.scrollTop + 501 >= listWrapRef.value.scrollHeight) {
        if (state.hasMore) {
          state.page++;
          getList(true);
        }
      }
    };

    const onClose = () => {
      context.emit("onClose");
    };

    getList();

    const keywordsInputRef = ref(null);

    const init = () => {
      // input自动聚焦
      nextTick(() => {
        keywordsInputRef.value.focus();
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      onKeywordsChange,
      onItemClick,
      onListScroll,
      listWrapRef,
      keywordsInputRef,
    };
  },
});
</script>

<style lang="less" scoped>
.list-wrap {
  width: 100%;
  height: 500px;
  overflow: hidden auto;
  margin-top: 10px;

  .empty-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item {
    width: 100%;
    padding: 10px 20px;
    cursor: pointer;
    // border-bottom: 1px solid #f1f1f1;

    &:hover {
      border-radius: 8px;
      background-color: #f7f0ff;
      //   border-bottom: 1px solid #f7f0ff;
    }

    .list-item-title {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 5px;
    }

    .list-item-content {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #999;
    }
  }

  .tips {
    padding: 10px 0;
    text-align: center;
    color: #999;
  }
}
</style>
